<template>
<el-form
   ref="queryForm"
   class="formData"
   :label-suffix="labelSuffix"
   :label-width="labelWidth"
   :rules="rulesForm"
   :model="queryParams"
   style="min-width:900px"
 >
   <el-form-item label="营业执照上传" prop="companyImgUrl">
     <ImageCropperModal
       :visible="cropperVisible"
       :url="file"
       :auto-crop-width="autoCropWidth"
       :auto-crop-height="autoCropHeight"
       @cancel="cropperVisible = false"
       @confirm="onConfirm"
     />
     <el-upload
        v-model="queryParams.companyImgUrl"
        class="avatar-uploader"
        action
        :auto-upload="false"
        :show-file-list="false"
        :on-change="changeUpload"
     >
     <img v-if="queryParams.companyImgUrl" :src="queryParams.companyImgUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon" />
     </el-upload>
   </el-form-item>
</el-form>
</template>

<script>
import ImageCropperModal from '@/components/commons/imageCropper/index'
 
export default {
  // ...
  components: {
    ImageCropperModal
  },
  data(){
    return{
      // ...
      queryParams: {
        companyImgUrl: ''
      },
      autoCropWidth: '400', // 要裁剪的宽
      autoCropHeight: '400', // 要裁剪的高
      file: '',
      fileName: '', // 存放文件名
      cropperVisible: false // 控制弹窗打开关闭
    }
  },
  methods:{
    // 文件状态改变时
    changeUpload(file) {
      var img = file.name.substring(file.name.lastIndexOf('.') + 1)
      const suffix = img === 'jpg' || img === 'png' || img === 'jpeg'
      if (!suffix) {
        this.$message.error('只能上传图片！')
        return false
      }
      // URL.createObjectURL的参数只能是blob或者file类型
      // 第一种方法用FileReader，URL.createObjectURL接收blob类型
      const reader = new FileReader()
      reader.onload = () => {
        // 把Array Buffer转化为blob 如果是base64不需要
        this.file = typeof reader.result === 'object' ? window.URL.createObjectURL(new Blob([reader.result]))
          : reader.result
      }
      // 转化为base64
      this.cropperVisible = true
      reader.readAsArrayBuffer(file.raw)
 
      // 第二种方法，URL.createObjectURL接收file类型
      // this.$nextTick(() => {
      //   this.file = URL.createObjectURL(file.raw)
      //   this.cropperVisible = true
      // })
 
      this.fileName = file.name
    },
    // 点击剪裁弹框的确定按钮
    async onConfirm(blob) {
      // 这里的new FormData（）指，以文件的方式传给后端（FormData的数据）
      const form = new FormData()
      // new File()的第一个参数是一个字符串数组，数组中的每一个元素对应着文件中一行的内容
      // 第二个参数就是文件名字符串
      // 第三个参数可以设定一些文件的属性，比如文件的MIME，最后更新时间等
      const file = new File([blob], this.fileName, { type: blob.type, lastModified: Date.now() })
      file.uid = Date.now()
      form.append('file', file)
      // 如果想在这里打印查看form的值，会发现它是空对象
      // 解决办法，需要用form.get('键')的方法获取值
      // console.log(form.get('file'))
      // 这里调用接口，获取后端返给的图片地址
      const { data } = await upload(form)
      this.queryParams.companyImgUrl = data
      this.cropperVisible = false
    },
  }
}
</script>